<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-08-26 14:57:33
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2024-09-23 11:28:10
 * @FilePath: \orderApp\packageOne\pages\personalInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<route lang="json5" type="page">
{
  layout: "default",
  style: {
    navigationStyle: "custom",
    navigationBarTextStyle: "black",
  },
}
</route>

<template>
  <view class="">
    <cu-navbar title="就餐记录" :border="true"></cu-navbar>
    <cu-slider :list="mealListInfo" :height="offsetTop" contentColor="#fff">
      <template v-slot:default="{ data, index }">
        <view class="" v-if="data.RecordList.length">
          <scroll-view
            class="height"
            :style="{ '--height': offsetTop + 'px' }"
            :scroll-y="true"
          >
            <view
              padding="0"
              v-for="(record, idx) in data.RecordList"
              :key="idx"
              class="recordItem"
            >
              <view class="name font-800">{{ record.date }}</view>
              <view class="flex">
                <!-- 餐次列表 -->
                <view class="mealBox" v-for="(meal, id) in record.list" :key="id">
                  <view
                    class="mealItem"
                    :class="meal.name == record.curMeal ? 'mealActive' : ''"
                    @click="changeMeal(meal.name, index, idx)"
                  >
                    {{ meal.name }}
                  </view>
                </view>
              </view>

              <!-- 菜肴列表 -->
              <view v-if="record.curList.length">
                <view class="menuBox" v-for="(dish, it) in record.curList" :key="it">
                  <view class="menuItem flex flex-items-center flex-justify-between">
                    <uv-image
                      :src="dish.dishUrl"
                      width="108rpx"
                      height="108rpx"
                      radius="5"
                      :observeLazyLoad="true"
                    >
                      <template v-slot:loading>
                        <uv-loading-icon color="#d9dede"></uv-loading-icon>
                      </template>
                    </uv-image>
                    <p class="name ellipsis dishesName">{{ dish.dishName }}</p>
                    <view class="flex takeBox"
                      >取餐量
                      <text class="name"> {{ dish.weight }} </text>
                      g
                    </view>
                  </view>
                </view>
              </view>
              <view v-else>
                <cu-empty></cu-empty>
              </view>
            </view>
          </scroll-view>
        </view>
        <view v-else>
          <cu-empty></cu-empty>
        </view>
      </template>
    </cu-slider>

    <view> </view>
  </view>
</template>

<script lang="ts" setup>
//
import { reqUserRecord } from "@/service/business/login";
import { useUserStore } from "@/store";
// 菜肴记录列表
const mealListInfo = reactive([
  {
    name: "今日",
    id: 0,
    RecordList: [],
  },
  {
    name: "本周",
    id: 1,
    RecordList: [],
  },
]);
const offsetTop = ref(useUserStore().pinia_SafeVal.top + 44);
const { user } = useUserStore().userInfo;
// 当前餐次标识

const mealOrigin = () => [
  { name: "早餐", mealData: [] },
  { name: "午餐", mealData: [] },
  { name: "晚餐", mealData: [] },
];

const changeMeal = (val, index, idx) => {
  mealListInfo[index].RecordList[idx].curMeal = val;
  let list = mealListInfo[index].RecordList[idx].list.find((el) => el.name == val);
  mealListInfo[index].RecordList[idx].curList = list.mealData;
};

const getUserRecord = () => {
  mealListInfo.forEach((el, idx) => {
    reqUserRecord({
      userId: user.userId,
      sign: idx,
    }).then((res) => {
      if (res.retCode == 2000) {
        let arr = [];
        for (const key in res.data) {
          let mealList = mealOrigin();
          let curList = [];
          for (const i in res.data[key]) {
            mealList.forEach((meal) => {
              if (meal.name == i) {
                meal.mealData = res.data[key][i];
                curList = meal.name == "早餐" ? meal.mealData : [];
              }
            });
          }
          let obj = {
            list: mealList,
            curMeal: "早餐",
            curList,
            date: key,
          };

          arr.push(obj);
        }
        el.RecordList = arr;
      }
    });
  });
  console.log(mealListInfo, 7878);
};

onMounted(() => {
  // getUserRecord();
});
</script>

<style lang="scss" scoped>
.height {
  height: calc(100vh - var(--height) - 216.92rpx);
}
.recordItem {
  min-height: 280rpx;
  margin-bottom: 15rpx;
}

.name {
  font-size: 31rpx;
  color: #111111;
}
.mealBox {
  margin: 23rpx 0;
  .mealItem {
    font-weight: 400;
    font-size: 23rpx;
    color: #595a5b;
    line-height: 38rpx;
    margin-right: 46rpx;
  }
  .mealActive {
    font-weight: bold;
    font-size: 27rpx;
    color: #00754a;
  }
}
.menuItem {
  padding: 8rpx 38rpx 8rpx 0;
  border-bottom: 1px solid #e7e8eb;

  &:last-child {
    border: none;
  }

  .dishesName {
    width: 47%;
  }

  .takeBox {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 31rpx;
    color: #969799;
    line-height: 46rpx;
  }
}
</style>
